import React from 'react';
import { Form, Input, Row, Col, message, Button } from "antd";
import levelList from '@/staticLists/levelList';
import $http from "@/services"
import { levelRule } from "@/utils/rules"

export default function index({ addStaffFn }) {
    const [form] = Form.useForm();

    const addStaffValue = async () => {
        try {
            const res = await form.getFieldsValue();
            await form.validateFields();
            const { code, msg } = await $http.createLevel(res);
            if (code) return message.error(msg);
            message.success(msg);
            addStaffFn();

        } catch (err) {
            message.warn("表单填写错误,请进行重新填写!")
        }
    }
    return (
        <Form
            layout='vertical'
            form={form}
        >
            {levelList.map((el, index) => {
                return (<Row justify={"space-between"} key={index}>
                    {el.map((item, childIndex) => {
                        return (<Col span={11} key={childIndex}>
                            <Form.Item
                                label={item.labelTxt}
                                name={item.itemName}
                                rules={levelRule[item.itemName]}
                            >
                                <Input
                                    placeholder={item.initVal}
                                    key={item._id}
                                ></Input>
                            </Form.Item>
                        </Col>)
                    })}
                </Row>)
            })}
            <Row>
                <Col span={24}>
                    <Form.Item>
                        <Button type="primary" htmlType='submit' onClick={addStaffValue}>创建</Button>
                    </Form.Item>
                </Col>
            </Row>
        </Form>




    )
}
